import React, { Component } from 'react'
import './index.less'
import { intAndOutlistFrequentlyAccessStudentRecord, intAndOutcountInAndOutFrequentlyAccessPeopleByMonth, findCurrentQkStudent } from '../api/api'
import moment from 'moment'
export default class index extends Component {
  componentDidMount() {
    this.pinfanchuru();
    this.sixmonth();
    this.findCurrentQkStudent();
    this.fetch();
  }
  state = {
    pinfanchuru: [],//频繁出入人员信息
    xixmonth: [],//最近6个月频繁出入人数
    weidaka: [],//学生当天未打卡
  }
  findCurrentQkStudent = async () => {
    const res = await findCurrentQkStudent()
    if (res.code === 20000) {
      this.setState({ weidaka: res.data })
    }
  }
  pinfanchuru = async () => {
    const res = await intAndOutlistFrequentlyAccessStudentRecord()
    if (res.code === 20000) {
      this.setState({ pinfanchuru: res.data })
      // console.log(res.data,"1111111111111111111111111")
    }
  }
  sixmonth = async () => {
    const res = await intAndOutcountInAndOutFrequentlyAccessPeopleByMonth()
    if (res.code === 20000) {
      this.setState({ sixmonth: res.data })
      // console.log(res.data,"22222222222222222222222222222222222")
    }
  }

fetch(){
  var box = document.getElementsByClassName("box")[0];
  var con1 = document.getElementsByClassName("box1")[0];
  var con2 = document.getElementsByClassName("box2")[0];
  this.speed = 50;
  if (con1.offsetHeight >= box.offsetHeight) {
   con2.innerHTML = con1.innerHTML;
    setInterval(scrol, this.speed);
   function scrol() {
    /*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0，否则就每个30默秒向上滚动1px */
    if (box.scrollTop >= con1.scrollHeight) {
     box.scrollTop = 0;
    } else {
     box.scrollTop++;
    }
   }
  }
}
 
  render() {
    const { weidaka } = this.state
    return (
      <div className="index">
        <div className="header">学生当天未打卡人员信息</div>
        <div className="title">
          <div>序号</div>
          <div>姓名</div>
          <div>院系</div>
          <div>班级</div>
          <div>最后一次打卡</div>
        </div>
        <div className="box">
          <div className="box1">
            {
              weidaka && weidaka.length ? weidaka.map((item, index) =>
                <div className="content" key={index}>
                  <div>{++index}</div>
                  <div>{item.student_name? item.student_name.substring(0, 1) + '**' : ''}</div>
                  <div>{item.yuanxi_name}</div>
                  <div>{item.zuanye_name}</div>
                  <div>{moment(item.last_time).format('MM-HH hh:mm:ss')}</div>
                </div>
              ) : <div style={{ width: '100%', height: '76vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>暂无数据</div>
            }
          </div>
          <div className="box2"></div>
        </div>
      </div>
    )
  }
}
